<template>
    <div>
      <div class="content">
        <!-- 面包屑和筛选 -->
        <div class="banner" :style="{height:(gradecur?'200px':'170px')}">
            <div class="crumb">
                <span>首页</span><span>></span><span>答题</span>
            </div>
            <div class="category">
                <div @click="categorynum = 0" :class="{categorycur:categorynum==0}">每日一练
                    <div class="everyday" v-show="categorynum==0">
                        <div :class="{everysub:true,everysubcur:everysubnum==index}" v-for="(item,index) in subjectlist" :key="index" @click="everysubnum = index;">{{item.name}}
                            <div class="everygra" v-show="index==everysubnum&&everysubnum>0">
                                <div class="everysub" v-for="(ele,index) in item.subjets_grades" :key="index" :data-dailyzid="ele.zid" @click="getDailyList($event)">{{ele.name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div @click="categorynum = 1" :class="{categorycur:categorynum==1}">评测</div>
                <div @click="categorynum = 2" :class="{categorycur:categorynum==2}">练习</div>
            </div>
            <div class="subject">
                <!-- 科目 -->
                <div v-for="(item,index) in subjectlist" :key="index" 
                     :data-subjetszid="item.zid"
                     @click="subjectnum = index;gradenum=20;gradecur=index>0?true:false;subjectScreen($event)"
                     :class="{subjectcur:subjectnum==index}">
                    {{item.name}}
                    <!-- 二级 -->
                    <div v-if="subjectnum == index && subjectnum>0" class="grade">
                        <div @click.stop="gradenum = 20;gradeScreen($event)" :class="{subjectcur:gradenum==20}" :data-subjetsgradezid="''">全部</div>
                        <div v-for="(element,index) in item.subjets_grades"
                            :key="index" @click.stop="gradenum = index;gradeScreen($event)"
                            :data-subjetsgradezid="element.zid"
                            :class="{subjectcur:gradenum==index}">
                            {{element.name}}
                        </div>
                    </div>

                    <div :class="{noslash:index==subjectlist.length-1}">/</div>
                </div>
            </div>
        </div>
        <!-- 价格筛选 -->
        <div class="pricescreen">
            <div>
                价格
                <div class="pricelist">
                    <div @click="allPrice">全部</div>
                    <div @click="freePrice">免费</div>
                    <div @click="nofreePrice">付费</div>
                </div>
            </div>
            <div class="trangle"></div>
        </div>
        <!-- 试卷列表 -->
        <div class="examlist">
            <exam-list v-for="(item,index) in examdata" :key="index" :examdata="item" class="examlistchild" :categorynum="categorynum" />
        </div>
        <!-- 分页 -->
        <div class="page">
            <div :class="{firstpage:true,noclick:query_info.page==1}" @click="firstPage">首页</div>
            <div :class="{pageup:true,noclick:query_info.page==1}" @click="previousPage">上一页</div>
            <div class="pagenum">
                <div v-for="(item,index) in pagecount" :key="index"
                :class="{pagecur:pagenum==index}"
                :data-pagenumber="index+1"
                @click="pageGet($event)">{{item}}</div>
            </div>
            <div :class="{pagedown:true,noclick:query_info.page==pagecount}" @click="nextPage">下一页</div>
            <div :class="{lastpage:true,noclick:query_info.page==pagecount}" @click="lastPage">尾页</div>
        </div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import ExamList from '../components/ExamList'
    export default {
  components: { ExamList },
        data() {
            return {
                categorynum:1,
                subjectnum:0,
                subjectdata:[],
                pagenum:0,
                everysubnum:0,
                subjectlist: [{name:'全部',zid:'',subjets_grades:''}],
                gradecur:false,
                gradenum:null,
                examdata:[],
                pagecount:null,
                query_info:{limit:8,page:1,name:'',subjets_zid:'',subjets_grade_zid:'',is_price:''},
                page_number:1,
                dailydata:null,
            }
        },
        mounted() {
            sessionStorage.getItem('token')?null:this.getToken()
            
            this.getSubjectList()
            //试卷列表初始化
            this.getExam(this.query_info)
        },
        methods:{
            //获取token
            getToken(){
                axios.post('http://test.xuetianxia.cn/server/api/v1/account/login?auto_login=true&phone=x000000010&password=111111')
                .then(res=>{
                    sessionStorage.setItem('token','Bearer '+res.data.result)
                    this.getJurisdiction()
                })
            },
            //验证登录是否有效  用拦截器
            getUserState(){
                axios.get(`http://121.89.232.163/api/personal-center/v1/verifying_user_login/`,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    //console.log(res)
                })
            },
            // 获取科目列表及年级
           getSubjectList(){
                axios.get('http://121.89.232.163/api/exarcisek/v1/get_subjets_list/')
                .then(res=>{
                    //console.log(res.data.data)
                    this.subjectdata = res.data.data
                    this.subjectdata.forEach(item=>{
                        this.subjectlist.push(item)
                    })
                })
           },
           // 获取出题权限
            getJurisdiction(){
                axios.get('http://121.89.232.163/api/topic/v1/is_topic_author/',
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    sessionStorage.setItem('jurisdiction',res.data.code=1)
                })
            },
            //    试卷请求
            getExam({limit,page,name,subjets_zid,subjets_grade_zid,is_price}){
                this.pagenum = this.query_info.page-1
                    axios.get(`http://121.89.232.163/api/exarcisek/v1/get_examination_paper_list/`+
                    `?limit=${limit}&page=${page}&name=${name}&subjets_zid=${subjets_zid}&subjets_grade_zid=${subjets_grade_zid}&is_price=${is_price}`)
                    .then(res=>{
                        //console.log(res.data.data)
                        this.examdata = res.data.data
                        this.pagecount = Math.ceil(res.data.count/8)
                    })
           },
        //    科目行筛选事件
           subjectScreen(e){
                //console.log(e.target.dataset.subjetszid)
                if(e.target.dataset.subjetszid===''){
                    this.query_info = {limit:8,page:1,name:'',subjets_zid:'',subjets_grade_zid:'',is_price:''}
                    this.getExam(this.query_info)
                }else{
                    this.query_info.subjets_zid = e.target.dataset.subjetszid
                    this.query_info.page = 1
                    this.getExam(this.query_info)
                }
           },
        //    年级行筛选事件
           gradeScreen(e){
                //console.log(e.target.dataset.subjetsgradezid)
                this.query_info.subjets_grade_zid = e.target.dataset.subjetsgradezid
                this.query_info.page = 1
                this.getExam(this.query_info)
           },
        //    请求第几页数据
           pageGet(e){
                //console.log(e.target.dataset.pagenumber)
                this.query_info.page = e.target.dataset.pagenumber
                this.getExam(this.query_info)
           },
        //    上一页和下一页
            previousPage(){
                if(this.query_info.page==1){
                    return
                }else{
                    this.query_info.page--
                    this.getExam(this.query_info)
                }
            },
            nextPage(){
                if(this.query_info.page==this.pagecount){
                    return
                }else{
                    this.query_info.page++
                    this.getExam(this.query_info)
                }
            },
            // 首页和尾页
            firstPage(){
                if(this.query_info.page==1){
                    return
                }else{
                    this.query_info.page = 1
                    this.getExam(this.query_info)
                }
            },
            lastPage(){
                if(this.query_info.page==this.pagecount){
                    return
                }else{
                    this.query_info.page = this.pagecount
                    this.getExam(this.query_info)
                }
            },
            //付费免费
            allPrice(){
                this.query_info.is_price = ''
                this.getExam(this.query_info)
            },
            freePrice(){
                this.query_info.is_price = 2
                this.getExam(this.query_info)
            },
            nofreePrice(){
                this.query_info.is_price = 3
                this.getExam(this.query_info)
            },
            // 获取练习题目  跳转
            getDailyList(e){
                //console.log(e.target.dataset.dailyzid)
                axios.get(`http://121.89.232.163/api/exarcisek/v1/get_daily_practice_answer/?subjets_grade_zid=${e.target.dataset.dailyzid}`,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    //console.log(res)
                    this.dailydata = res.data.data
                    this.$router.push({path:'/daily',query:{dailydata:this.dailydata,practice_type:3}})
                })
            },
         },
    }
</script>

<style  scoped>
.content{
    width: 1200px;
    margin: auto;
}
.banner{
    position: relative;
}
.crumb{
    margin-top: 20px;
}
.crumb>span{
    display: inline-block;
    width: 32px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    text-align: center;
}
.category{
    margin-top: 46px;
    margin-bottom: 42px;
}
.category>div{
    display: inline-block;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    margin-right: 42px;
}
.category>div:hover{
    cursor: pointer;
}
.categorycur{
    color: #3F8CFD !important;
}
.subject>div{
    display: inline-block;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
}
.subject>div:hover{
    cursor: pointer;
}
.subjectcur{
    color: #3F8CFD !important;
}
.subject>div>div{
    display: inline-block;
    margin: 0 30px;
    width: 6px;
    height: 14px;
    font-size: 12px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #666666;
    line-height: 14px;
}
.subject .grade{
    width: 1200px;
    height: 1px;
    margin: 0;
    position: absolute;
    top: 185px;
    left: 0;
}
.grade>div{
    display: inline-block;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    margin-right: 43px;
}
.noslash{
    display: none !important;
}
.pricescreen{
    position: relative;
    box-sizing: border-box;
    width: 1200px;
    height: 46px;
    background: #F5F5F5;
    margin-top: 42px;
    padding-left: 1139px;
}
.pricescreen>div{
    position: relative;
    display: inline-block;
    width: 32px;
    height: 46px;
    font-size: 16px;
    line-height: 46px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3F8CFD;
}
.pricescreen>div:hover{
    cursor: pointer;
}
.pricescreen>.trangle{
    border: 6px solid #3F8CFD;
    width: 0;
    height: 0;
    display: inline-block;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-left: 8px;
    position: absolute;
    top: 22px;
    left: 1168px;
}
.pricelist{
    display: none;
    position: absolute;
    width: 70px;
    height: 90px;
    border: 1px solid #E3E8E9;
    top: 45px;
    left: -11px;
    z-index: 15;
    background-color:#FFFFFF ;
}
.pricescreen>div:hover>.pricelist{
    display: block;
}
.pricelist:hover{
    display: block;
}
.pricelist>div{
    width: 70px;
    height: 30px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
    text-align: center;
}
.pricelist>div:hover{
    color: #3F8CFD;
    background: #F4F4F4;
}
.examlist{
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
    margin: auto;
    margin-top: 46px;
}
.examlistchild{
    margin-left: 8px;
    margin-right: 8px;
}
.page{
    display: flex;
    justify-content: space-around;
    height: 37px;
    margin: auto;
    margin-top: 31px;
}
.page>div{
    display: inline-block;
}
.firstpage{
    width: 32px;
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: #4D565C;
    line-height: 19px;
    margin-right: 9px;
    user-select: none;
    cursor: pointer;
}
.pageup{
    width: 48px;
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: #4D565C;
    line-height: 19px;
    margin-right: 14px;
    user-select: none;
    cursor: pointer;
}
.noclick{
    color: #C9CDD0 !important;
    cursor: default !important;
}
.pagenum{
    display: flex !important;
    margin-right: 14px;
    justify-content: space-around;
}
.pagenum>div{
    width: 37px;
    height: 37px;
    text-align: center;
    line-height: 37px;
    user-select: none;
    cursor: pointer;
}
.pagecur{
    background: #4D565D;
    border-radius: 50%;
    color: #FFFFFF;
}
.pagedown{
    width: 48px;
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: #4D565C;
    line-height: 19px;
    margin-right: 9px;
    user-select: none;
    cursor: pointer;
}
.lastpage{
    width: 32px;
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: #4D565C;
    line-height: 19px;
    user-select: none;
    cursor: pointer;
}
.everyday{
    width: 99px;
    position: absolute;
    top: -65px;
    left: 80px;
    z-index: 15;
    box-shadow: 0px 0px 4px 0px #F0F0F0;
}
.category>div:first-child{
    position: relative;
}
.everysub{
    height: 32px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 32px;
    background: #FFFFFF;
    padding-left: 10px;
    cursor: pointer;
    user-select: none;
}
.everysubcur{
    background: #FAFAFA;
    color: #298DFF;
}
.everysub:hover{
    background: #FAFAFA;
    color: #298DFF;
}
.everygra{
    position: absolute;
    z-index: 20;
    width: 99px;
    top: 0;
    left: 100px;
    box-shadow: 0px 0px 4px 0px #F0F0F0;
}
</style>